let swiper = document.querySelector('.swiper');
let itemContainer = document.querySelector('#item-container')
let leftBtn = document.querySelector('.left')
let rightBtn = document.querySelector('.right')
let items = document.querySelectorAll('.item')
let circle = document.querySelector('.circle')

//获取图片的数量
let count = items.length
//获取轮播图容器的宽度
let swiperWidth = parseFloat(getComputedStyle(swiper).width)
//默认当前索引为0
let index = 0;

//给每个li去设定宽度
items.forEach(function(el){
    el.style.width = swiperWidth + "px"
})
//获取第一个li.item的高度，li的高度由图片撑开，也就是要获取图片在保持比例不变的情况下的高度，让图片都能完成显示出来
//请确保每个图片的比例大小相同
itemHeight = parseFloat(getComputedStyle(items[0]).height)
//把图片的高度设置给swiper容器，让图片能够按照比例的全部显示
swiper.style.height = itemHeight + "px"

//给ul去设定宽度，让所有的li.item都都能排成一行
itemContainer.style.width = swiperWidth * count + 'px'

//根据图片的数量动态生成数字指示器html
let circlesHtml = ''
for(var i=0;i<count;i++){
    circlesHtml += `<span data-index=${i}>${i+1}</span>`
}
circle.innerHTML = circlesHtml

//封装下一张函数
function next(){
    if(index == count-1){
        index = -1
    }
    index++
    goTo(index)
}
//封装上一张函数
function prev(){
    if(index == 0){
        index = count
    }
    index--
    goTo(index)
}
//封装跳转函数
function goTo(i){
    index = i
    itemContainer.style.transform = `translateX(${-swiperWidth*i}px)`
}
//给左右按钮添加事件，用两种不同的方式
leftBtn.addEventListener('click',prev)
rightBtn.onclick = next
//通过事件代理的方式给数字指示器添加事件
circle.addEventListener('click',function(e){
    let curEle = e.target
    let curIndex = curEle.dataset.index
    goTo(curIndex)
})
